<template>
  <div class="slider">
    <div class="content">
      <div class="bg-img-div">
        <img :src="bgimg" alt />
      </div>
      <div class="slider-img-div" :style="{ transform: translate2 }">
        <img :src="sliderimg" alt />
      </div>
    </div>
    <div class="slider-move">
      <div class="slider-move-track">拖动滑块完成拼图</div>
      <div
        class="slider-move-btn"
        :style="{ transform: translate, backgroundPosition: bgposition + 'px' }"
        v-drag
      ></div>
    </div>

      <div class="operation">
            <span
              title="关闭验证码"
              @click="close"
              class="el-icon-circle-close"
            ></span>
            <span
              title="刷新验证码"
              @click="refreshCaptcha"
              class="el-icon-refresh-left"
            ></span>
          </div>

  </div>
</template>

<script>
import Vue from "vue";

export default {
  data() {
    return {

      uuid: "",
      movePercent: 0,
      // bgImgWidth: $(".slider-img-div").width(),
      bgImgWidth: 0,
      end: 300,
      bgimg: "",
      sliderimg: "",
      //css
      translate2: "translate(0px, 0px)",
      translate: "translate(0px, 0px)",
      bgposition: "-5px 11.79625%",
    };
  },

  mounted() {
    // this.refreshCaptcha();

    // this.$nextTick(() => {
        // this.bgImgWidth = document.querySelector('.slider-img-div').offsetWidth
        //  console.log(this.bgImgWidth)
      // });
    
  },

  methods: {
    valid() {

       console.log('密:'+this.uuid+"=="+this.movePercent)
       // 返回结果  父件调用的回调方法
       this.$emit("login", this.uuid,this.movePercent);
     
    },
    refreshCaptcha() {
      this.$get(
        "/code",
        {},
        (data) => {
          this.reset();
          this.uuid = data.uuid;
          this.bgimg = data.verBackImg;
          this.sliderimg = data.verSliderImg;
        },
        (error) => {
          this.$message.error(error.msg);
        }
      );
    },
    reset() {
      this.bgposition = "-5px 11.79625%";
      this.translate = "translate(0px, 0px)";
      this.translate2 = "translate(0px, 0px)";
      this.movePercent = 0;
      this.uuid = "";

      this.bgImgWidth = document.querySelector('.slider-img-div').offsetWidth
      console.log(this.bgImgWidth)
    },
    close() {

      // 返回结果  父件调用的回调方法
      this.$emit("closePupUp");
    },
  },

  // 自定义指令 实现可拖动
  directives: {
    drag(el, bindings, vnode) {
      //     函数里面第三个参数vnode 它的vnode.context就是当前的vm实例
      let that = vnode.context;

      el.onmousedown = function (e) {

        var disx = e.pageX - el.offsetLeft;
        // var disy = e.pageY - el.offsetTop

        document.onmousemove = function (event) {
          // el.style.left = e.pageX - disx + 'px'
          // el.style.top = e.pageY - disy + 'px'
          let moveX = event.pageX - disx;

          // console.log(moveX);
          if (moveX < 0) {
            moveX = 0;
          } else if (moveX > that.end) {
            moveX = that.end;
          }

          //el.style.left =moveX+ 'px';
          that.translate = "translate(" + moveX + "px, 0px)";
          that.translate2 = "translate(" + moveX + "px, 0px)";
          that.movePercent = moveX / that.bgImgWidth;

        };

        document.onmouseup = function () {  //鼠标抬起监听
          document.onmousemove = document.onmouseup = null;
         
          that.valid();
        };

      };
    },
  },


};
</script>

 <style lang="less" scoped>
.slider {
  background-color: #fff;
  width: 378px;
  height: 355px;
  z-index: 999;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 6px;
  box-shadow: 0 0 11px 0 #999999;
}

.slider .content {
  width: 100%;
  height: 220px;
  position: relative;
}

.bg-img-div,
.slider-img-div {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}

.bg-img-div img {
  width: 100%;
}

.slider-img-div img {
  height: 100%;
}

.slider .slider-move {
  height: 60px;
  width: 100%;
  margin-top: 15px;
  position: relative;
}

.slider  {
  // height: 100%;
  width: 100%;
}


.slider-move-track
{
  background: url(~@/assets/img/sprite01.png)
    no-repeat;
}
.slider-move-btn {
  background: url(~@/assets/img/sprite02.png)
    no-repeat;
}





.slider-move .slider-move-track {
  line-height: 45px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  color: #88949d;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.slider-move-track {
 height: 45px;
}
.slider {
  user-select: none;
}

.slider-move .slider-move-btn {
  transform: translate(0px, 0px);
  background-position: -5px 11.79625%;
  position: absolute;
  top: -12px;
  left: 0;
  width: 66px;
  height: 66px;
}

.slider-move-btn:hover{
  cursor: pointer;
}



 .operation {
    width: 100%;
    height: 40px;
    > span {
      color: #9fa3ac;
      display: inline-block;
      width: 40px;
      font-size: 25px;
      line-height: 40px;
      text-align: center;
      &:hover {
        background: #e2e8f5;
      }
    }
  }
  
  
</style>
